<template>
<div class="goods">

<!-- 详情列表 -->   
<div class="detail_message" ref="ref_detail_message">    
 <el-descriptions title="" direction="vertical" :column="5" border :data="detail_mes">

    <template slot="extra">
             <span class="span">详情列表</span>
             <div class="lose_a" ref="ref_lose"></div>
             <!-- 右上角编辑器(铅笔) -->
          <i class="el-icon-edit" ref="ref_edit" @click="handleCloseEdit()"></i>  
          <!-- 五个小选择框 -->
          <div class="selections" ref="ref_selections">
            <i class="el-icon-upload el-icon--right"></i>
            <i class="el-icon-share"></i>
            <i class="el-icon-plus" @click="addNew_desc()"></i>
            <i class="el-icon-delete" @click="handleDeleted1()"></i>
            <i class="el-icon-check" @click="handleEdit()"></i>
            <i class="el-icon-close" @click="close_selections()"></i>
        </div>
      </template>
       <!-- 使用template进行包裹遍历（注意：key要放在真实dom上）slot-scope="scope"  ref="ref_normal"-->
         <template v-for="(item, index) in detail_mes">
         <!-- 通过使用 v-model.lazy 指令与 item 数组中的数据进行双向数据绑定，从而实现对输入框中的内容进行修改。 -->
         <!-- 该属性用于控制描述条目的描述标签所占用的空间，具体来说，:span="1" 表示一个条目占用一个格子，而 :span="2" 表示一个条目占用两个格子，可以看出用来控制布局。 -->
      <el-descriptions-item label="药材ID" :key="index"><input type="text"  class="input_medium"   title="不可修改" v-model.lazy="item.id"> </el-descriptions-item>
      <el-descriptions-item label="日期" :key="index"><input type="text"  class="input_medium" v-model.lazy="item.date"> </el-descriptions-item>
      <el-descriptions-item label="药材名称"  :key="index"><input type="text" class="input_medium" ref="ref_input"   title="不可修改" v-model.lazy="item.name"></el-descriptions-item>
      <el-descriptions-item label="归属药房"  :key="index"><input type="text" class="input_medium" v-model.lazy="item.shop_name"></el-descriptions-item>
      <el-descriptions-item label="药材图片"  :key="index"><input type="text" class="input_medium"  title="不可修改" v-model.lazy="item.img"></el-descriptions-item>
      <el-descriptions-item label="药材功效描述" :span="2" :key="index"><input type="text" class="input_max" v-model.lazy="item.desc" style="width:100%;"></el-descriptions-item>
      <el-descriptions-item label="价格" :key="index"><input type="text" class="input_min" v-model.lazy="item.price"></el-descriptions-item>
      <el-descriptions-item label="单数" :span="1" :key="index"><input type="text" class="input_medium" v-model.lazy="item.qty"></el-descriptions-item>
      <el-descriptions-item label="剩余库存" :span="1" :key="index"><input type="text" class="input_medium" v-model.lazy="item.store"></el-descriptions-item>

        </template>
        <!-- 新建页面 -->
           
        <!-- 结束页面 -->
</el-descriptions>
</div>
<!--  -->
<div class="lose2" ref="ref_lose2"></div>
<el-table
    
  :data="tableData"
  border
  style="width:100%"
  fit
  type="index"
  class="table"
  max-height="700"

  >
<el-table-column
  fixed
  label="序号"
  width="70"
  >
  <template scope="scope">
    {{scope.$index + 1 }}
  </template>
</el-table-column>
 <el-table-column
  prop="date"
  label="上架日期"
  sortable 
  width="150"
  >
</el-table-column>
  <el-table-column
  prop="name"
  label="药材名称"
  width="100">
</el-table-column>
  <el-table-column
  prop="shop_name"
  label="药房归属"
  width="150">
</el-table-column>
<el-table-column
  prop=""
  label="药材图片"
  width="150">
  <template scope="scope">
    <img :src="require('../img/'+Number(scope.$index +1) +'.jpg')">
  </template>
</el-table-column>
<el-table-column
  prop="desc"
  label="药材功效描述"
  width="350">
</el-table-column>
  <el-table-column
  prop="price"
  label="价格"
  width="120">
</el-table-column>
<el-table-column
  prop="qty"
  label="单数"
  width="120">
</el-table-column>

  <el-table-column
  prop="store"
  label="剩余库存"
  width="150">
</el-table-column>
<!-- <el-table-column
  fixed
  prop="id"
  label="药材ID"
  width="100"
  >
</el-table-column> -->
<el-table-column
  fixed="right"
  label="操作"
  width="150"
  >
  <template slot-scope="scope">
                                <!-- 当前行的数据和当前行的索引值作为参数传递给该函数 -->
    <el-button @click="handleClick(scope.row,scope.$index)" type="text" size="small">查看</el-button>
     <el-button type="text" size="small" @click="handleDeleted(scope.row,scope.$index)" class="deleted">删除</el-button>
  </template>
</el-table-column>
</el-table>


  <div class="tableData_length" v-if="istableDataLength">当前数据为{{this.tableData.length}}条</div>

  </div>

</template>

<script>

export default{
  data(){
    return{
      istableDataLength:true,
      istrue:false,
      isshowUserMess:false,
      tableData: [],
      detail_mes:{},
      update_index:'',
      isadd:true,
      addNumber:false, 
      // newAdd_detail_mes:{date,},
    }
  },
  methods:{
        //打开详情及编辑器
         handleClick(row,index) {  
            this.detail_mes = []     
            this.$refs.ref_detail_message.style.opacity = '100%'
            this.$refs.ref_detail_message.style.height = '260px'
            this.$refs.ref_edit.style.display = 'block'
            this.$refs.ref_selections.style.top = '2%'
            this.detail_mes.push(row)    
            console.log('拿到index',index);
            this.update_index = index
          },
          //保存并打开编辑器
          handleEdit(){  
            //打开编辑器
            this.$refs.ref_edit.style.display = 'block'
             //关闭选择框
            this.$refs.ref_selections.style.opacity = '0%'
            this.$refs.ref_selections.style.height = '0px'
            this.$refs.ref_lose.style.height = '15px'
            this.$refs.ref_lose2.style.height  = '0px'
            //更新
            console.log('需要更新的数据',this.detail_mes);
            if(this.detail_mes[0].name != '' && this.addNumber == false){      //  this.detail_mes[0] 代表什么
                //弹窗成功
                this.$message({
                  showClose: true,    //showClose：是否显示关闭按钮，默认为 false，这里设置为 true。
                  message: '您修改了一个记录！',
                  type: 'success'
                });
               let a = this.update_index
                this.$axios.post('/api/update/all_lists?date='+this.detail_mes[0].date+'&name='+this.detail_mes[0].name+'&shop_name='+this.detail_mes[0].shop_name
                +'&img='+this.detail_mes[0].img+'&desc='+this.detail_mes[0].desc+'&price='+this.detail_mes[0].price+'&qty='+this.detail_mes[0].qty+'&store='+this.detail_mes[0].store
                ).then(res=>{
                  console.log('已更新的数据列表',res);
                })
            }
           
            //新增
            if(this.detail_mes[0].name != '' && this.addNumber == true){     
              console.log('新增',this.detail_mes);
               this.$axios.post('/api/all_lists/insert?date='+this.detail_mes[0].date+'&name='+this.detail_mes[0].name+'&shop_name='+this.detail_mes[0].shop_name
                +'&img='+this.detail_mes[0].img+'&desc='+this.detail_mes[0].desc+'&price='+this.detail_mes[0].price+'&qty='+this.detail_mes[0].qty+'&store='+this.detail_mes[0].store+'&id='+this.detail_mes[0].id
                ).then(res=>{
                 if(res.data.code ==200){
                     console.log(res);
                      //弹窗成功
                    this.$message({
                      showClose: true,
                      message: '您新增了一条记录',
                      type: 'success'
                    });
                 }else{
                  //弹窗警告
                  this.$message({
                    showClose: true,
                    message: '订单信息未完善！',
                    type: 'error'
                  });
                }
              })
             
            }
             //关掉新增选项
            this.addNumber = false
            //刷新
              this.refresh()
          },
          //关闭全部
          close_selections(){
            this.$refs.ref_selections.style.opacity = '0%'
            this.$refs.ref_lose.style.height = '0px'
             this.$refs.ref_selections.style.height = '0px'
             this.$refs.ref_detail_message.style.opacity = '0%'
            this.$refs.ref_detail_message.style.height = '0px'
            this.$refs.ref_lose2.style.height  = '0px'

          },
          //关闭编辑打开选择框
          handleCloseEdit(){
            this.$refs.ref_edit.style.display = 'none'
            this.$refs.ref_selections.style.opacity = '100%'
            this.$refs.ref_selections.style.height = '50px'
                          //这俩是管的哪里
            this.$refs.ref_lose.style.height = '45px'   
            this.$refs.ref_lose2.style.height  = '20px'
          },
          //删除1     有bug   图片没有更新
          handleDeleted1(){
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {   // 用户点击了“确定”按钮后执行的代码
              this.$axios.post('/api/all_lists/deleted?name='+this.detail_mes[0].name)    
              //重新获取数据渲染列表
              this.$axios.get("/api/all_lists").then(res=>{
                this.tableData = res.data.params.data
                //为空数组添加数据
              this.detail_mes = [{date:'',name:'',shop_name:'',img:'',desc:'',price:'',qty:'',store:''}]            //干啥用的
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
               //刷新
              this.refresh()
            }).catch(() => {   // 用户点击了“取消”按钮后执行的代码
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //删除
          handleDeleted(row,index){
             this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.post('/api/all_lists/deleted?name='+row.name)
              //刷新
              this.$axios.get("/api/all_lists").then(res=>{
                this.tableData = res.data.params.data
                  //为空数组添加数据
               this.detail_mes = [{date:'',name:'',shop_name:'',img:'',desc:'',price:'',qty:'',store:''}]
              })
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
               //刷新
              this.refresh()
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          },
          //添加数组
         addNew_desc(){
           console.log('添加');
           //打开添加开关
           this.addNumber = true
           this.detail_mes = [{date:'',name:'',shop_name:'',img:'',desc:'',price:'',qty:'',store:''}]
        },
        //刷新
        refresh(){
            //刷新
              let timer =  setInterval(res=>{
              //通过 Vue Router 跳转到 /empty 路径，并携带一个名为 a 的查询参数，其值为 goods。其中，replace 方法用于替换当前路由，是一种跳转方式
                      this.$router.replace({ path:'/empty',query:{a:'goods'}})
                      console.log('定时器');
                      clearInterval(timer)
                },800)
        },
         
          
      },
//当组件被挂载到页面后，会执行 mounted() 钩子函数，从后端服务器获取数据并将其存储到tableData数组中，然后通过 prop 属性将数据渲染到表格中。
  mounted(){
    //发送数据请求
      this.$axios.get("/api/all_lists").then(res=>{
       this.tableData = res.data.params.data
       console.log(this.tableData);
    })
     if(this.tableData.length==0){
      this.istableDataLength = false
    }
  }
}
</script>

<style lang="less">
  ::v-deep .el-table::before{
    overflow: auto;
    height: 800px;
    background-color: gray;
  }
.deleted{
  color: crimson;
}
.el-icon-edit{
  position: absolute;
  top: 0.5%;
  width: 20px;
  height: 10px;
  right: 2%;
  color: white;
  background-color: dodgerblue;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
}
.el-descriptions__body {
  margin-left: 0px;
  width: 80%;
}

.el-descriptions{
  width: 100%;
}
.goods{
  position: absolute;
   top: 8.6%;
  left: 162px;
  width: 86.8%;
  height: auto;
  display: flex;
  flex-flow: column;
  user-select: none;
  transition: all 1s;
  margin-left: 20px;

}
  // ::-webkit-scrollbar { display: none !important }

  .selections{
    position: absolute;
    text-align: left;
    top: -10%;
    left: 1%;
    width: 80%;
    height: 50px;
    opacity: 0%;
    transition: all 1s;
  }
  
  .selections>i{
    margin: 3px;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: rgb(99, 168, 237);
  }
    .selections>i:nth-child(5){
      position: absolute;
    left: 89%;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: dodgerblue;
  }

  .selections>i:nth-child(6){
    position: absolute;
    left: 93.5%;
    width: 50px;
    height: 33px;
    border-radius: 5px;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    color: #f7f7f7;
    background-color: dodgerblue;
  }
  .selections>i:hover{
    background-color: dodgerblue;
  }
  .selections>i:active{
    background-color: rgba(30, 143, 255, 0.626);
  }
  .span{
    position: absolute;
    display: block;
    left: 0%;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 20px;
    font-family: '宋体';
    color: gray;
  }
  .lose_a{
    height: 15px;
    transition: all 1s;
  }
.detail_message{
  opacity: 0%;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 0px;
  transition: all 1s;
  box-shadow: 0px 1px 4px gray;
}

.tableData_length{
  width:100%;
  height:500px;
  text-align: center;
  color: gray;
}
.input_medium{
  width:140px;
  margin-right: 20px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}
.input_min{
  width: 50px;
  font-size: 15px;
   width: auto;
  border: 2px solid transparent;
  user-select: none;
}
.input_max{
  width: 450px;
  font-size: 15px;
  width: auto;
  border: 2px solid transparent;
  user-select: none;
}

.lose2{
  height: 0px;
}
img{
  width: 80%;
  height: 50%;
  text-align: center;
}


/* table{

 
}
th{
  border: 2px solid black;
}
tr{
  border: 1px solid ;
}
td{
   border: 1px solid gray;
} */





</style>